<template>
  <div class="total">
    <!-- 进度卡片 -->
    <div class="top">
      <div class="card">
        <div class="data">
            <p class="word">日完成度 </p>
            <p class="percent">{{dwidth}}</p>
            <div class="range">
                <div class="fill" :style="{width: getDwidth}">
                </div>
            </div>
        </div>
      </div>
      <div class="card ">
          <div class="data">
              <p class="word">月完成度 </p>
              <p class="percent second">{{mWidth}}</p>
              <div class="range">
                  <div class="fill fill-second" :style="{width: getMwidth}">
                  </div>
              </div>
          </div>
      </div>
      <div class="card second">
          <div class="data">
              <p class="word">总完成度 </p>
              <p class="percent second">{{tWidth}}</p>
              <div class="range">
                  <div class="fill fill-second" :style="{width: getTwidth}">
                  </div>
              </div>
          </div>
      </div>
    </div>
    <!-- 日历 -->
    <div class="content">
      <div class="content-left">
        <template>
          <t-calendar @cell-click="cellClick" :controllerConfig="controllerConfig.visible ? controllerConfig : false" >
            <div slot="head">🗓 你的学习计划历</div>
          </t-calendar>
        </template>
      </div>
      <div class="content-right">
        <div class="studyList">
          <div class="list-title">
            <span>今日学习任务</span>
          </div>
          <svg viewBox="0 0 0 0" style="position: absolute; z-index: -1; opacity: 0;">
            <defs>
              <linearGradient id="boxGradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="25" y2="25">
                <stop offset="0%"   stop-color="#27FDC7"/>
                <stop offset="100%" stop-color="#0FC0F5"/>
              </linearGradient>
              <linearGradient id="lineGradient">
                <stop offset="0%"    stop-color="#0FC0F5"/>
                <stop offset="100%"  stop-color="#27FDC7"/>
              </linearGradient>
              <path id="todo__line" stroke="url(#lineGradient)" d="M21 12.3h168v0.1z"></path>
              <path id="todo__box" stroke="url(#boxGradient)" d="M21 12.7v5c0 1.3-1 2.3-2.3 2.3H8.3C7 20 6 19 6 17.7V7.3C6 6 7 5 8.3 5h10.4C20 5 21 6 21 7.3v5.4"></path>
              <path id="todo__check" stroke="url(#boxGradient)" d="M10 13l2 2 5-5"></path>
              <circle id="todo__circle" cx="13.5" cy="12.5" r="10"></circle>
            </defs>
          </svg>
          <div class="todo-list todo-study" id="list-study">
            <label class="todo" v-for="i in studyList" :key="i.id" :index=i.id @click="finish(i.id,'study')">
              <input class="todo__state" type="checkbox" />
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon">
                <use xlink:href="#todo__line" class="todo__line"></use>
                <use xlink:href="#todo__box" class="todo__box"></use>
                <use xlink:href="#todo__check" class="todo__check"></use>
                <use xlink:href="#todo__circle" class="todo__circle"></use>
              </svg>
              <div class="todo__text">{{i.content}}</div>
            </label>
          </div>
        </div>
        <div class="selfList">
          <div class="list-title">
            <span>今日个人事项</span>
            <template>
              <div>
                <t-icon name='add' @click="visible2 = true"></t-icon>
                <t-dialog header="添加个人事项" :footer="false" preventScrollThrough :visible.sync="visible2" >
                  <t-input clearable v-model="input" placeholder="请输入您的个人事项" style="max-width: 500px" />
                  <div class="buttom-dia">
                    <t-button class="cancel" variant="outline" theme="default" @click="close">取消</t-button>
                    <t-button class="add" @click="addList">添加</t-button>
                  </div>
                </t-dialog>
              </div>
            </template>
          </div>
          <svg viewBox="0 0 0 0" style="position: absolute; z-index: -1; opacity: 0;">
            <defs>
              <linearGradient id="boxGradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="25" y2="25">
                <stop offset="0%"   stop-color="#27FDC7"/>
                <stop offset="100%" stop-color="#0FC0F5"/>
              </linearGradient>
              <linearGradient id="lineGradient">
                <stop offset="0%"    stop-color="#0FC0F5"/>
                <stop offset="100%"  stop-color="#27FDC7"/>
              </linearGradient>
              <path id="todo__line" stroke="url(#lineGradient)" d="M21 12.3h168v0.1z"></path>
              <path id="todo__box" stroke="url(#boxGradient)" d="M21 12.7v5c0 1.3-1 2.3-2.3 2.3H8.3C7 20 6 19 6 17.7V7.3C6 6 7 5 8.3 5h10.4C20 5 21 6 21 7.3v5.4"></path>
              <path id="todo__check" stroke="url(#boxGradient)" d="M10 13l2 2 5-5"></path>
              <circle id="todo__circle" cx="13.5" cy="12.5" r="10"></circle>
            </defs>
          </svg>
          <div class="todo-list todo-self">
            <label class="todo" v-for="i in selfList" :key="i.id" :index=i.id @click="finish(i.id,'self')">
              <input class="todo__state" type="checkbox" />
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon">
                <use xlink:href="#todo__line" class="todo__line"></use>
                <use xlink:href="#todo__box" class="todo__box"></use>
                <use xlink:href="#todo__check" class="todo__check"></use>
                <use xlink:href="#todo__circle" class="todo__circle"></use>
              </svg>
              <div class="todo__text">{{i.content}}</div>
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import $ from 'jquery'
export default {
  name: 'MyPlan',
  props: {
    msg: String
  },
  data () {
    return {
      // stid: '4',
      seid: '3',
      // 添加个人事项的时间
      time: '',
      // 今日总任务数
      nowstl: 0,
      // 今日已完成任务数
      nowfinished: 0,
      // 本月任务数
      nowmonthNum: 0,
      // 本月已完成数
      monthFinished: 0,
      // 总任务数
      totalNum: 0,
      // 已完成的总数
      totalFinished: 0,
      // 符合条件的列表 需要渲染的数据
      studyList: [],
      selfList: [],
      // 总列表
      tstudyList: [
        
      ],
      tselfList: [
        {
          id: 1,
          time: '2023-3-27',
          type: 'self',
          content: 'Do a very important task'
        },
        {
          id: 2,
          time: '2023-3-27',
          type: 'self',
          content: 'Do a very important task'
        },
        {
          id: 3,
          time: '2023-3-27',
          type: 'self',
          content: 'Do a very important task'
        }
      ],
      // 完成度
      dwidth: '0',
      mWidth: '20%',
      yWidth: '10%',
      tWidth: '5%',
      // 控制对话框是否显示
      visible2: false,
      // 对话框中的值
      input: '',
      // 防止任务列表双击
      cellClickTimmer: null,
      // 改写日历样式的对象
      controllerConfig: {
        visible: true,
        weekend: {
          visible: false, // 是否显示
          showWeekendButtonProps: {
            // 用于透传props给显示周末按钮组件
            disabled: false,
            size: 'medium'
          }
        },
        current: {
          visible: false, // 是否显示
          currentDayButtonProps: {
            // 用于透传props给“今天”钮组件（“month”模式下有效）
            disabled: false,
            size: 'small',
            theme: 'warning'
          }
        }
      }
    }
  },
  methods: {
    // 点击完成列表任务
    finish (id, name) {
      clearTimeout(this.cellClickTimmer)
      // 阻止双击事件
      this.cellClickTimmer = setTimeout(() => {
        if (name === 'study') {
          // 已完成的总数
          this.totalFinished += 1
          // 月任务
          // var list = this.studyList.filter(item => item.id === id)
          // var num = list[0].time.split('-')[1]
          // var date = new Date()
          // var month = (date.getMonth() + 1).toString()
          this.monthFinished += 1
          // 日任务
          var stlist = this.studyList.filter(item => item.id !== id)
          // console.log(stlist)
          this.studyList = stlist
          this.nowfinished = this.nowfinished + 1
        } else if (name === 'self') {
          var selist = this.selfList.filter(item => item.id !== id)
          this.selfList = selist
        }
      }, 1200)
    },
    // 点击添加按钮事件  学习列表不能添加
    addList () {
      this.visible2 = false
      var arr = []
      var time = new Date()
      var year = time.getFullYear().toString()
      var month = (time.getMonth() + 1).toString()
      var dates = time.getDate()
      arr.push(year, month, dates)
      var nowstr = arr.join('-')
      if (this.time === '') {
        var selist = {
          id: this.seid + 1,
          time: nowstr,
          type: 'self',
          content: this.input
        }
      } else {
        selist = {
          id: this.seid + 1,
          time: this.time,
          type: 'self',
          content: this.input
        }
      }
      this.tselfList.push(selist)
      this.seid = this.seid + 1
      this.showselfList(this.seid)
      this.input = ''
    },
    // 关闭对话框
    close () {
      this.visible1 = false
      this.visible2 = false
      this.input = ''
    },
    // 点击日历日期 渲染任务列表
    cellClick (options) {
      clearTimeout(this.cellClickTimmer) // 用于在双击事件中取消掉额外触发的一次单击事件
      this.cellClickTimmer = setTimeout(() => {
        var time = new Date()
        var month = (time.getMonth() + 1).toString()
        // 获取日历点击的日期
        var date = options.cell.formattedDate
        var str = date.split('-')
        // 日历中的月份有零
        if (str[1].startsWith('0')) {
          str[1] = str[1].substring(1)
          console.log(str[1]);
        }
        // 日历中的日期首位为零
        if (str[2].startsWith('0')) {
          str[2] = str[2].substring(1)
        }
        // 判断点击的日历月份是否比现在大 大则禁止点击学习任务
        if(str[1] >month){
          console.log('ok');
          var todo = document.getElementById("list-study")
          todo.style.pointerEvents = 'none';
        }else{
          var todo = document.getElementById("list-study")
          todo.style.pointerEvents = '';
        }

        str = str.join('-')
        this.time = str
        // 渲染学习任务
        var stlist = this.tstudyList.filter(item => item.time === str)
        this.studyList = stlist
        // 渲染个人事项
        var selist = this.tselfList.filter(item => item.time === str)
        this.selfList = selist
        // 今日总任务数
        this.nowstl = stlist.length
        // 今日已完成数
        this.nowfinished = stlist.length - this.studyList.length
        console.log(str[1]);
        console.log(month);

        
      }, 300)
    },
    // 修改完成度进度条
    updateWidth (width, name) {
      if (name === 'dwidth') {
        this.dwidth = width
      } else if (name === 'mwidth') {
        this.mWidth = width
      } else if (name === 'ywidth') {
        this.yWidth = width
      } else if (name === 'twidth') {
        this.tWidth = width
      }
    },
    // 更新展示个人事项列表
    showselfList (id) {
      this.selfList = this.tselfList.filter(item => item.id === id)
    },
    setDate(date){
      var arr = []
      var time = new Date(date)
      var year = time.getFullYear().toString()
      var month = (time.getMonth() + 1).toString()
      var dates = time.getDate()
      arr.push(year, month, dates)
      var nowstr = arr.join('-')
      return nowstr
    }
  },
  // 显示当天的数据
  mounted () {
    var token = localStorage.getItem('token')
    // 请求今日任务并渲染
    this.$http.get('/plan/TodayPlan',{params:{
      id:3,
      chat:token
    }}).then((result)=>{
      var str = result.data.split(' ')[1]
      var obj = {
        content:str,
        id:3,
        time:this.setDate()
      }
      // this.tstudyList.push(str)
      this.studyList.push(obj)
      // 获取今日学习任务总数
      this.nowstl = this.studyList.length
    })

    // 请求所有任务
    this.$http.get('/chat/GetallDaysPlan',{params:{
      id:3,
      chat:token
    }}).then((result)=>{
      console.log(result.data);
      // 获取总任务数
      this.totalNum = result.data.length
      
      var chnNumChar = {
            '零':0,
            '一':1,
            '二':2,
            '三':3,
            '四':4,
            '五':5,
            '六':6,
            '七':7,
            '八':8,
            '九':9
          };
      var list = result.data.filter(item => item.level===1)
      for(var i=0;i<list.length-1;i++){
        var datatime = new Date('2023-03-31')
        var num = parseInt(result.data[i].content.replace(/[^\d]/g, " "))
          
        // console.log(num);
        var content = result.data[i].content.split(' ')[1]
        var id = result.data[i].orders
        if(num<=3) {
          var time = this.setDate(datatime.setDate(datatime.getDate()-(4-num)))
          }
        else {
          var time = this.setDate(datatime.setDate(datatime.getDate()+(num-4)))
        }

        // 获取当月学习任务数量
        var mm = time.split('-')[1]
        var nowtime = new Date()
        var month = (nowtime.getMonth() + 1).toString()
        if (mm === month) {
          this.nowmonthNum += 1
        }

        var obj={
          id:id,
          time:time,
          content:content
        }
        this.tstudyList.push(obj)
      }
      console.log(this.tstudyList);
    })
    
    // 渲染今日个人事项
    // var selist = this.tselfList.filter(item => item.time === nowstr)
    // this.selfList = selist
    
  },
  computed: {
    // 计算完成度
    getDwidth () {
      var width = Math.floor(((this.nowfinished / this.nowstl) * 100))
      if (isNaN(width)) {
        width = '0'
      }
      width = width + '%'
      this.updateWidth(width, 'dwidth')
      return this.dwidth
    },
    getMwidth () {
      var width = Math.floor(((this.monthFinished / this.nowmonthNum) * 100))
      if (isNaN(width)) {
        width = '0'
      }
      if (width > 100) {
        width = '100'
      }
      width = width + '%'
      this.updateWidth(width, 'mwidth')
      return this.mWidth
    },
    getYwidth () {
      return this.yWidth
    },
    getTwidth () {
      var width = Math.floor(((this.totalFinished / this.totalNum) * 100))
      if (isNaN(width)) {
        width = '0'
      }
      if (width > 100) {
        width = '100'
      }
      width = width + '%'
      this.updateWidth(width, 'twidth')
      return this.tWidth
    }
  }
}
</script>

<style lang='less' scoped>
.total{
  background-color: #fff;
}
.outerWrapper {
  width: 100%;
  height: 100%;
  position: relative;

  .shadow {
    position: absolute;
    width: 100%;
    height: 22px;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  }
  .number {
    font-weight: 600;
    position: absolute;
    right: 0;
    font-size: 14px;
    line-height: 22px;
  }
  .item {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--td-text-color-secondary);
    font-size: 14px;
    line-height: 22px;
    span {
      display: block;
      left: 1px;
      width: 5px;
      height: 5px;
      border-radius: 10px;
      margin-right: 4px;
    }
  }
  .error {
    background: var(--td-error-color);
  }
  .warning {
    background: var(--td-warning-color);
  }
  .success {
    background: var(--td-success-color);
  }

  .slotWrapper {
    position: absolute;
    bottom: 2px;
    left: 5px;
  }
}
/* 进度卡片 */
.top{
  padding: 10px;
  display: flex;
  justify-content: space-around;
}
.card {
  /* float: left; */
  display: inline-block;
  padding: 1rem;
  background-color: #fff;
  box-shadow: 0 25px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  width: 270px;
  border-radius: 20px;
  /* margin-left: 30px; */
  margin-top: 30px;
}

.percent {
  /* margin-left: 0.5rem; */
  font-size: 2rem;
  color: #31c5c3;
  font-weight: 600;
  /* display: flex; */
}
.second{
  color: #38bdfa;
}

.data .word {
  margin-top: 1rem;
  margin-bottom: 1rem;
  color: #1F2937;
  font-size: 2.25rem;
  line-height: 0.5rem;
  font-weight: 700;
  text-align: left;
}

.data .range {
  position: relative;
  background-color: #E5E7EB;
  width: 100%;
  height: 0.5rem;
  border-radius: 0.25rem;
}

.data .range .fill {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #31c5c3;
  // width: 76%;
  height: 100%;
  border-radius: 0.25rem;
}
.data .range .fill-second{
  background-color: #38bdfa;
}

/* 日历 */
.content{
  display: flex;
  justify-content: space-between;
  margin-top: 100px;
  padding: 30px;
}
.content-left{
  height: 743px;
  width: 100%;
  margin-right: 40px;
}
.content-left .t-calendar{
  /* width: 100%; */
  height: 743px;
}
.content-right{
  // height: 730px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  // width: 400px;
  // background-color: #0052d9;
}
.buttom-dia{
  display: flex;
  justify-content: space-between;
  width: 140px;
  padding-top: 30px;
  float: right;
}
.t-input_wrap{
  margin-top: 20px;
}
// 任务列表
.studyList{
  border-radius: 10px;
  background:#FFF;
  border: 1px solid #ccc;
}
.selfList{margin-top: 40px;
  background:#FFF;
  border-radius: 10px;
  border: 1px solid #ccc;
}

.list-title{
  border-radius: 10px 10px 0 0;
  background-image: linear-gradient(to right bottom, #99f6f4, #3fdaf9, #00baff, #0094fd, #6c65e1);
  font-weight: normal;
  padding: 0 9px;
  font-size: 25px;
  line-height: 55px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.t-icon{
  cursor: pointer;
  width: 15px;
  height: 15px;
  background-color: rgb(252, 252, 252);
  border-radius: 5px;
}

// 列表样式
@duration: 0.8s;

.todo-list {
  border-radius: 0 0 10px 10px;
  font-size: 15px;
  width: 19em;
  height: 280px;
  margin: auto;
  padding: 0.5em 1em;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
}

.todo {
  display: block;
  position: relative;
  padding: 1em 0.5em 1em 16%;
  margin: 0 auto;
  cursor: pointer;
  border-bottom: solid 1px #ddd;
  &:last-child { border-bottom: none; }
}

.todo__state {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.todo__text {
  color: saturate(#1B4A4E,15%);
  transition: all @duration/2 linear @duration/2;
}

.todo__icon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  margin: auto;
  fill: none;
  stroke: #27FDC7;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.todo__line,
.todo__box,
.todo__check {
  transition: stroke-dashoffset @duration cubic-bezier(.9,.0,.5,1);
}

.todo__circle {
  stroke: #27FDC7;
  stroke-dasharray: 1 6;
  stroke-width: 0;
  transform-origin: 13.5px 12.5px;
  transform: scale(0.4) rotate(0deg);
  animation: none @duration linear; //cubic-bezier(.08,.56,.04,.98);
  @keyframes explode {
    //0% { stroke-width: 0; transform: scale(0.5) rotate(0deg); }
    30% {
      stroke-width: 3;
      stroke-opacity: 1;
      transform: scale(0.8) rotate(40deg);
      //animation-timing-function: cubic-bezier(.89,.01,.95,.51);
    }
    100% {
      stroke-width: 0;
      stroke-opacity: 0;
      transform: scale(1.1) rotate(60deg);
      //animation-timing-function: cubic-bezier(.08,.56,.04,.98);
    }
  }
}

.todo__box {
  stroke-dasharray: 56.1053, 56.1053; stroke-dashoffset: 0;
  transition-delay: @duration * 0.2;
}
.todo__check {
  stroke: #27FDC7;
  stroke-dasharray: 9.8995, 9.8995; stroke-dashoffset: 9.8995;
  transition-duration: @duration * 0.4;
}
.todo__line {
  stroke-dasharray: 168, 1684;
  stroke-dashoffset: 168;
}
.todo__circle {
  animation-delay: @duration * 0.7;
  animation-duration: @duration * 0.7;
}

.todo__state:checked {
  ~ .todo__text { transition-delay: 0s; color: #5EBEC1; opacity: 0.6; }
  ~ .todo__icon .todo__box { stroke-dashoffset: 56.1053; transition-delay: 0s; }
  ~ .todo__icon .todo__line { stroke-dashoffset: -8; }
  ~ .todo__icon .todo__check { stroke-dashoffset: 0; transition-delay: @duration * 0.6; }
  ~ .todo__icon .todo__circle { animation-name: explode; }
}
</style>
